<template>
    <div>
        <div class="setting-list">
            <div @click="usernameJump" class="list-item">
                <span>修改用户名</span>
                <i class="iconfont">&#xe681;</i>
            </div>
            <div @click="passwordJump" class="list-item">
                <span>修改密码</span>
                <i class="iconfont">&#xe681;</i>
            </div>
        </div>
        <div @click="loginout" class="loginout">退出</div>
    </div>
</template>

<script>
export default {
    setup (props, context) {


        // 设置密码
        const passwordJump = function () {
            context.parent.$router.push('/setting/password');
        }

        // 设置用户名
        const usernameJump = function () {
            context.parent.$message.error('该功能正在维护中...');
        }

        // 退出
        const loginout = function () {
            context.parent.$message.success('退出登录成功');
            setTimeout(() => {
                context.parent.$router.push('/home');
                window.localStorage.clear();
            }, 2000);
        }

        const methods = { passwordJump, usernameJump }
        return {
            ...methods,
            loginout
        }
    }
}
</script>


<style lang="less" scoped>
.setting-list {
    display: flex;
    width: 100%;
    height: 5.333333rem;
    flex-direction: column;
    .list-item {
        flex: 1;
        display: flex;
        padding: 0 .266667rem;
        justify-content: space-between;
        align-items: center;
        border-bottom: .053333rem solid #f7f7f7;
        span {
            font-size: .88rem;
            color: #4b4b4b;
            font-weight: 700;
        }
        i {
            color: #dfdfdf;
        }
    }
}

.loginout {
    width: 100%;
    height: 2.133333rem;
    line-height: 2.133333rem;
    text-align: center;
    background-color: red;
    color: #fff;
    font-weight: 700;
    font-size: .88rem;
    margin-top: 1.333333rem;
}
</style>